<template>
<div>
	<router-link class="btn btn-success" to="/crud/new">添加学生</router-link>
	<div class="table-responsive">
	    <table class="table table-striped">
	        <thead>
	            <tr>
	                <th>#</th>
	                <th>姓名</th>
	                <th>年龄</th>
	                <th>操作</th>
	            </tr>
	        </thead>
	        <tbody>
	            <tr v-for="item in list">
	                <td>{{ item.id }}</td>
	                <td>{{ item.name }}</td>
	                <td>{{ item.age }}</td>
	                <td><router-link :to="`/crud/update?id=${item.id}`" class="btn">编辑</router-link><a @click.prevent="deleteById(item.id)" href="#/" class="btn">删除</a></td>
	            </tr>
	        </tbody>
	    </table>
	</div>
</div>
</template>

<script>
import axios from 'axios'

export default {
	data () {
		return {
			list : []
		}
	},
	// created () {
	// 	axios.get('http://localhost:3000/list').then(res => this.list = res.data)
	// }
	async created () {
		this.loadList()
	},
	methods : {
		async loadList () {
			// console.log('1')
			const res = await axios.get('http://localhost:3000/list')
			// console.log(res)
			// console.log('2')
			this.list = res.data
			// console.log('3')
		},
		async deleteById (id) {
			// 1.绑定注册删除事件处理函数
			// 2.发起请求删除数据
			// 3.根据响应结果处理
			if ( ! window.confirm('确定要删除吗？')) {
				return
			}
			axios.delete(`http://localhost:3000/list/${id}`)
			.then(res => this.loadList())
		}
	}
}
</script>

<style>
	
</style>
